<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>社区</title>
    <link rel="stylesheet" href="css1/community_youji.css">
    <link rel="stylesheet" href="css1/tou.css">
    <link rel="stylesheet" href="css1/B_floor.css">
    <link rel="stylesheet" href="css1/Tool_bar.css">
    <link rel="stylesheet" href="css1/bootstrap1.css">
    <script src="js/jquery-3.4.1.min1.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script src="js/vue.min1.js"></script>


<!--    前后端调用-->
    <script>
        $(function () {
            var userId =  $.cookie('userId');
            var vm = new Vue({
                el: "#app",
                data: {
                    articles:[],
                    users:[],
                    pagenum:1,
                    pagesize:2,
                    Count:0,
                    NavigatepageNums:[],
                    UserImg:"",
                    UserSign:"",
                },
                methods: {
                    getsi:function(){

                    },

                    FY:function(){
                        vm.article=[];
                        vm.NavigatepageNums=[];
                        $.ajax({
                            url: "/getA",
                            type: "post",
                            data:{
                                "userId":userId,
                                "pageNum":vm.pagenum,
                                "pageSize":vm.pagesize,
                            },
                            datatype: "json",
                            success: function (data) {
                                for (var i = 0; i < data.size; i++) {
                                    vm.articles.push({ArticleFace:data.list[i].articleFace,ArticleTime:data.list[i].articleTime,
                                        hot:data.list[i].hot,ArticleLocal:data.list[i].articleLocal,
                                        ArticleTitle:data.list[i].articleTitle,});
                                }
                                for (var i = 0; i < data.navigatepageNums.length; i++) {
                                    vm.NavigatepageNums.push({Nums:data.navigatepageNums[i]});
                                }
                                vm.Count=data.total;
                            }
                        })

                    },
                    //分页------------------------
                    pagedown: function () {
                        if(vm.pagenum<Math.ceil(vm.Count/vm.pagesize)){
                            $(".item_article").remove();
                            vm.pagenum++;
                            vm.FY();
                        }else{
                            confirm("最后一页")
                        }
                        },
                    pageup: function () {
                        if(vm.pagenum>1){
                            $(".item_article").remove();
                            vm.pagenum--;
                            vm.FY();
                        }else{
                            confirm("第一页");
                        }

                    },
                    pageclick:function (index) {
                        vm.pagenum=index+1;
                        $(".item_article").remove();
                        vm.FY();

                    }

                    },


            })
            //取user
            $.ajax({
                url: "/getusersi",
                type: "post",
                data:{
                    "userId":userId,

                },
                datatype: "json",
                success: function (data) {
                    vm.users.push({UserName:data[0].userRickname,UserImg:data[0].userImg,
                    UserSign:data[0].userSign
                    })



                    // vm.UserImg=data[0].userImg;
                    // vm.UserSign=data[0].userSign;
                }
            })
            vm.FY();
        })

    </script>
<!--    前端js-->
    <script>
        function changepic() {
            var reads = new FileReader();
            var reads1=new FileReader();
            f = document.getElementById('Fileup').files[0];
            var img = document.getElementById("img3");
            reads1.readAsArrayBuffer(f);
            // reads.onload = function(e) {
            //     $(".cover_image").css("background-image",this.result);
            //     document.getElementById('img3').src = this.result;
            //     $("#img10 button").css("display", "block");
            //     $("#img3").css("display", "block");
            //     $("#img10").addClass("img11");
            // }
            reads1.onload=function (e) {
                // $(".cover_image").css("background-image",this.result);
                $("#img10 .button1").css("display", "block");
                $("#img3").css("display", "block");
                $("#img10").addClass("img11");
                    var bf = this.result;
                    var blob = new Blob([bf],{type:"text/plain"});
                   img.src = URL.createObjectURL(blob);

            }

            $("#quxiao").click(function () {
                $("#img10 .button1").css("display", "none");
                $("#img3").css("display", "none");
                $("#img10").removeClass("img11");

            })
            // $("#submit").click(function () {
            //     document.getElementById("loginForm").submit();//表单提交
            // })


        }
        function tijiao(){
            document.getElementById("fromUp").submit();//表单提交
        }
    </script>


</head>
<body>
<div id="app">


    <div id="img10">
        <img src="https://img3.youxiake.com/static/images/homeDefaultTop.png?imageslim" class="cover_image2" id="img3">
        <img src="" id="img2">
        <button id="quxiao" class="button1" >取消</button>
<!--        <button id=queding">确定</button>-->
        <input type="submit" value="确定" onclick="tijiao()" id="submit" class="button1">


    </div>
<!--    -->
    <div class="public_head">
        <div class="public_head_auto">
            <ul class="public_head_nav">
                <li class="logo"><a href="" target="_blank"></a></li>
                <li><a href="sy-index.html">首页</a></li>
                <li><a href="community_my.html" id="shequ"  class="active" >社区</a></li>
                <li><a href="" id="quanzi" >圈子</a></li>
                <li><a href="" id="forum" >目的地</a></li>
                <li><a href="" id="wenda" >问答</a></li>
                <li><a href="YouJi-Z.html">攻略</a></li>
                <li><a href="video.html" target="_blank">视频</a></li>
                <li><a href="" target="_blank">领队</a></li>
                <li><a href="photo.html" target="_blank">摄影</a></li>
                <li class="yaoyao_box">
                    <a class="yaoyao_a" href="javascript:;">旅游</a>
                    <div class="yaoyao_ul">
                        <a href="" target="_blank" class="yaoyao_li">周边游</a>
                        <a href="" target="_blank" class="yaoyao_li">国内游</a>
                        <a href="" target="_blank" class="yaoyao_li">出境游</a>
                        <a href="" target="_blank" class="yaoyao_li">当地玩乐</a>
                        <a href="" target="_blank" class="yaoyao_li">亲子游</a>
                        <a href="" target="_blank" class="yaoyao_li">户外游</a>
                        <a href="" target="_blank" class="yaoyao_li">定制游</a>
                        <a href="" target="_blank" class="yaoyao_li">活动赛事</a>
                    </div>
                </li>
                <input type="hidden" value="" id="yxklogin">
                <li style="float: right;"><a href="register.html ">注册</a></li>
                <li style="float: right;"><a href="login.html">登录</a></li>
                <li class="xc_message right mouse_up">
                    <div class="xx"><i></i><span></span>消息 <span class="down"></span></div>
                    <!--                    <ul class=" mouse_wrapper">-->
                    <!--                        <li><a href="" target="_blank">订单消息</a></li>-->
                    <!--                        <li><a href="" target="_blank">互动消息</a></li>-->
                    <!--                        <li><a href="" target="_blank">系统通知</a></li>-->
                    <!--                        <li><a href="" target="_blank">私信</a></li>-->
                    <!--                    </ul>-->
                </li>
                <li class="userinfo right mouse_up">
                    <div class="xx">
                        <a href="" target="_blank">
                            <img src="https://img3.youxiake.com/static/images/defaultAvatar.png?imageMogr2/thumbnail/!220x220r/gravity/Center/crop/!220x220/quality/90" alt="">
                        </a>
                        <span class="down"></span>
                    </div>
                    <!--                    <ul class="userinfo_wrapper mouse_wrapper">-->
                    <!--                        <li class="color"><a href="" target="_blank">积分 1</a> / <a href="" target="_blank">游侠币 0.00</a></li>-->
                    <!--                        <li><span class="bg bg1"></span> <input type="hidden" value="11002928" id="yxkuid"> <a href="" target="_blank">我的等级</a></li>-->
                    <!--                        <li><span class="bg bg2"></span> <a href="" target="_blank">我的领地</a></li>-->
                    <!--                        <li><span class="bg bg3"></span> <a href="" target="_blank">我的订单</a></li>-->
                    <!--                        <li><span class="bg bg9"></span> <a href="" target="_blank">我的收藏</a></li>-->
                    <!--                        <li><span class="bg bg4"></span> <a href="" target="_blank">我的游记/攻略</a></li>-->
                    <!--                        <li><span class="bg bg5"></span> <a href="" target="_blank">我的草稿箱</a></li>-->
                    <!--                        <li><span class="bg bg6"></span> <a href="" target="_blank">摄影作品</a></li>-->
                    <!--                        <li><span class="bg bg7"></span> <a href="" target="_blank">个人设置</a></li>-->
                    <!--                        <li><span class="bg bg8"></span><a href="">退出登录</a></li>-->
                    <!--                    </ul>-->
                </li>

            </ul>
        </div>
    </div>
<!--------------------------------图片+导航栏------------------------------>
    <div class="user_top">
<!----------------------------------背景图片------------------>
    <div class="cover_image" style="background-image: url(https://img3.youxiake.com/static/images/homeDefaultTop.png?imageslim);">



        <div class="auto_x">
<!--            <img src="https://img3.youxiake.com/static/images/homeDefaultTop.png?imageslim" class="cover_image2" id="img3" >-->
<!--            style="display: none;width: 1591px;margin-left: -216px;position: absolute;"-->
            <a href=""> <form action="/uploadFile"  method="post" enctype="multipart/form-data" id="fromUp">
                <input type="file"  id="Fileup" name="file" class="Fileup" style="opacity: 0 ;position: absolute;z-index: 10;left: 1100px;top: 310px" onchange="changepic(this)">
                <input type="text" name="userId"  value="1" style="display: none">
            </form>

                </a>
            <div class="up_image">
                <i></i>上传封面图</div>

        </div>  <!---->
<!---------------------------------小导航栏--------------------->
        <nav id="user_nav" class="user_nav">
            <ul>
                <li class=""><a href="community_my.html">我的领地</a></li>
                <li class=""><a href="community_youji.html">我的游记/攻略</a></li>
                <li class=""><a href="community_xc.html">我的相册</a></li>
                <li class=""><a href="community_sy.html">我的摄影作品</a></li>
                <li class=""><a href="userInfo.html">我的详细信息</a></li>
            </ul>
        </nav>






    </div>


</div>
<!--    具体内容-->
    <div class="user_center">
        <div class="user_left">
<!--            头像------->
            <div class="user_tx">
                <img src="https://img3.youxiake.com/static/images/defaultAvatar.png?imageMogr2/thumbnail/!136x136r/gravity/Center/crop/!136x136/quality/90">
                <a href="" target="_blank" class="change_tx"><i class="icon_camr"></i></a>
                <!----></div>
<!--            个性签名               -->
            <div class="user_other_info">
                <h3>{{users[0].UserName}}<i class="icon_sex_man"></i> <!----></h3>
                <div class="user_tag"></div>
                <div class="item_lv"><span class="name">社区等级：</span>
                    <a href="/user/lv.html" target="_blank">Lv.1 普陀山</a>
                </div>
                <div class="item_lv"><span class="name">消费等级：</span>
                    <a href="/user/cost.html" target="_blank">
                        <span class="lv_vip lv_vip1"><i></i>普通会员</span></a>
                </div> <!----> <div class="user_jj" >
            {{users[0].UserSign}}
        </div>
            </div>
<!--            粉丝   关注-->
            <ul class="gz_fans">
                <li><a href=""><span class="numb">0</span> <span class="xx">关注</span></a></li>
                <li><a href=""><span class="numb">0</span> <span class="xx">粉丝</span></a></li>
            </ul> <!---->
<!--            谁看过我-->
            <div class="who_look">
                <h3>谁看过我</h3> <p><!----></p>
                <ul>
                    <li><a href="" target="_blank">
                        <img src="https://img2.youxiake.com/000/00/00/16_avatar_big.jpg?imageMogr2/thumbnail/!220x220r/gravity/Center/crop/!220x220/quality/90">
                        <span>懒人TONY</span></a></li>
                    <li><a href="" target="_blank">
                        <img src="https://img2.youxiake.com/000/01/25/58_avatar_big.jpg?imageMogr2/thumbnail/!220x220r/gravity/Center/crop/!220x220/quality/90">
                        <span>孟小雅</span></a></li>
                    <li><a href="" target="_blank">
                        <img src="https://img2.youxiake.com/000/01/81/29_avatar_big.jpg?imageMogr2/thumbnail/!220x220r/gravity/Center/crop/!220x220/quality/90">
                        <span>雅洁</span></a></li>
                    <li><a href="" target="_blank">
                        <img src="https://img2.youxiake.com/avatar23625_89LfeZ9tC8Li.jpg?imageMogr2/thumbnail/!220x220r/gravity/Center/crop/!220x220/quality/90">
                        <span>曾豪_真好</span></a></li>
                    <li><a href="" target="_blank">
                        <img src="https://img2.youxiake.com/000/05/16/32_avatar_big.jpg?imageMogr2/thumbnail/!220x220r/gravity/Center/crop/!220x220/quality/90">
                        <span>张力视觉</span></a></li>
                    <li><a href="" target="_blank">
                        <img src="https://img2.youxiake.com/001/12/27/20_avatar_big.jpg?imageMogr2/thumbnail/!220x220r/gravity/Center/crop/!220x220/quality/90">
                        <span>江湖雁</span></a></li>
                </ul>
            </div>
        </div>
        <div class="user_right">
            <div class="user_article">
                <div class="article_tit_top">
                    <div class="btn_link">
                        <a href="travel_articles.html" target="_blank" class="write"><i></i>写游记</a>

                    </div>
                    <h3 class="tit">我的游记/攻略<em>({{Count}})</em>
                        <span class="titnav"><span class="active">全部游记</span>|
                            <span class="">精华游记</span>
                        </span>
                    </h3>
                </div> <!---->
<!--                <div class="none_data">-->
<!--                    <img src="https://img3.youxiake.com/static/images/homeNoArticle.png">-->
<!--                </div>  &lt;!&ndash;&ndash;&gt;-->
                <div class="item_article"  v-for="(article,index) in articles">
                    <a href="https://bbs.youxiake.com/y/1011382.html" target="_blank">
                        <div class="pic">
                            <img :src="article.ArticleFace">
                        </div>
                        <h3 class="artic_tit"><!----> <!----> <!---->
                         <span class="ziNumb">{{article.ArticleTitle}}</span>
                        </h3>
                    </a>
                    <div class="article_info">
                        <span>{{article.ArticleLocal}}</span>
                        <span>{{article.hot}}</span>
                        <span>{{article.ArticleAddress}}</span>
                        <span>{{article.ArticleTime}}</span>
                        <!----> <!----> <!----></div>
                </div>
            </div>
        </div>

        <div style="float: left;margin-left: 750px;width: 1500px  ">
            <ul class="pagination pagination-lg">
                <li><a href="javascript:" @click="pageup">&laquo;</a></li>
                <li class="FColor" v-for="(Num,index) in NavigatepageNums"><a href="javascript:"  @click="pageclick(index)">{{Num.Nums}}</a></li>
                <li><a href="javascript:" @click="pagedown">&raquo;</a></li>
            </ul>
        </div>
    </div>



    <div  style="position: relative;top: 600px;float: left;margin-left: 200px">
        <!--底部-->
        <div class="b_floor">
            <div class="l_wrapper">
                <div class="m_unit_b2">
                    <div class="footerInfo">
                        <ul class="weima">
                            <li>
                                <img src="https://img3.youxiake.com/static/images/weima1.png" width="77" height="77"><p>神游网公众号</p>
                            </li>
                            <li>
                                <img src="https://img3.youxiake.com/static/images/weima2.png" width="78" height="79"> <p>APP下单更优惠</p>
                            </li>
                        </ul>
                        <p>
                            <a data-trace="页面底部|页面底部_点击|页面底部_关于游侠客" rel="nofollow" href="javascript:void (0)" target="_blank">关于神游网</a>
                            <a data-trace="页面底部|页面底部_点击|页面底部_游侠客的故事" rel="nofollow" href="javascript:void (0)" target="_blank">制作组的故事</a>
                            <a data-trace="页面底部|页面底部_点击|页面底部_联系游侠客" rel="nofollow" href="javascript:void (0)" target="_blank">联系制作组</a>
                            <a data-trace="页面底部|页面底部_点击|页面底部_游侠客招聘" rel="nofollow" href="javascript:void (0)" target="_blank">制作组招聘</a>
                            <a data-trace="页面底部|页面底部_点击|页面底部_意见反馈" rel="nofollow" href="javascript:void (0)" target="_blank">意见反馈</a>
                            <a data-trace="页面底部|页面底部_点击|页面底部_使用协议" rel="nofollow" href="javascript:void (0)" target="_blank">使用协议</a>
                            <a data-trace="页面底部|页面底部_点击|页面底部_隐私政策" rel="nofollow" href="javascript:void (0)" target="_blank">隐私政策</a>
                            <a data-trace="页面底部|页面底部_点击|页面底部_交换链接" rel="nofollow" href="javascript:void (0)" target="_blank">交换链接</a>
                            <a data-trace="页面底部|页面底部_点击|页面底部_帮助中心" rel="nofollow" href="javascript:void (0)" target="_blank">帮助中心</a>
                            <a data-trace="页面底部|页面底部_点击|页面底部_网站地图" rel="nofollow" href="javascript:void (0)" target="_blank">网站地图</a>
                        </p>
                        <p>
                            <span>浙ICP备 09011712 号-1</span>
                            <span>浙公网安备 33010602002105号</span>
                            <span><a href="javascript:void (0)" rel="nofollow" target="_blank">营业执照</a></span>
                            <span>浙江神游网国际旅行社有限公司</span>
                            <span>杭州途游电子商务有限公司</span>
                            <span>许可证编号：L-ZJ-CJ00161</span>
                        </p>
                        <p>? 2019 shenyouwang.com 版权所有法律顾问：浙江四海方圆律师事务所 傅林放 杭州市旅游投诉电话：0571-96123 投诉及紧急事件联系电话：400-670-6300转5</p>
                        <p>旅游预订电话(免长途费)：400-670-6300，公司总部地址：浙江省杭州市西湖区教工路198号浙商大创业园D幢3楼，投诉建议邮箱：jianyi@youxiake.com</p>
                    </div>
                    <div class="friendLines">
                        <div class="footerImages clearfix foot-ext">
                            <a href="javascript:;" rel="nofollow" title="不良信息举报中心" class="footer-ext-s2"></a>
                            <a href="javascript:;" rel="nofollow" title="瑞信安全认证" class="footer-ext-s3"></a>
                            <a href="javascript:;" rel="nofollow"  title="12321垃圾信息举报中心" class="footer-ext-s4"></a>
                            <a href="javascript:;" rel="nofollow">
                                <img width="116" height="47" src="https://img3.youxiake.com/static/images/alipay201305.png" alt="支付宝">
                            </a>
                            <a href="javascript:;" rel="nofollow"  title="网络110报警服务" class="footer-ext-s5"></a>
                            <a href="javascript:;" rel="nofollow"  title="网上标识信息" class="footer-ext-s6"></a>
                            <a href="javascript:;" rel="nofollow"  title="全球中文论坛100强" class="footer-ext-s7"></a>
                            <a target="cyxyv" href="https://v.yunaq.com/certificate?domain=bbs.youxiake.com&amp;from=label&amp;code=90020">
                                <img src="https://aqyzmedia.yunaq.com/labels/label_sm_90020.png">
                            </a>
                        </div>
                    </div>

                </div>
                <a href="javascript:" name="floor">&nbsp;</a>
            </div>
        </div>
        <!--右侧页面工具-->
        <div class="tool_bar">
            <ul>
                <li class="backBot">
                    <i class="icon">
                        <a href="#floor"><img src="./images/下载%20(2).png" alt=""></a>
                    </i>
                    <span class="name">页面底部</span>
                </li>
                <li class="backTop">
                    <i class="icon">
                        <a href="#"><img src="./images/下载%20(3).png" alt=""></a>
                    </i>
                    <span class="name">返回顶部</span>
                </li>
            </ul>
        </div>


    </div>

</div>

</body>
</html>


<!--<div class="none_data">-->
<!--    <img src="https://img3.youxiake.com/static/images/homeNoPic.png">-->
<!--</div>  &lt;!&ndash;&ndash;&gt;-->